const AvatarThumb = (props: any) => {
  const { image, width, height } = props;
  // height width hoverable
  return (
    <>
      <div className="avatar-thumb">
        <img src={image} alt="img" />
      </div>
      <style>{`
          .avatar-thumb {
            width: ${width || '88px'};
            height: ${height || '88px'};
            border-radius: 50%;
            overflow: hidden;
          }
          .avatar-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
            opacity: 1;
            transition: all .7s ease;
            filter: none;
          }
          .avatar-thumb img:hover {
            filter: blur(30px);
            // filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="50",MakeShadow=false);
            transition: filter .7s ease;
          }
      `}</style>
    </>
  )
};

export default AvatarThumb;
